<template>
  <div class="bj-line-container">
    <!-- <h3 class="chart-title">北京市视频车辆数据趋势图</h3> -->
    <div ref="chartContainer" class="chart-container"></div>
    <!-- <div v-if="debugInfo" class="debug-info">
      {{ debugInfo }}
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";

const chartContainer = ref(null);
const debugInfo = ref("");
let chartInstance = null;

// 模拟数据
const generateMockData = () => {
  const hours = [];
  const onlineCount = [];
  const offlineCount = [];
  const totalCount = [];

  // 生成24小时的数据
  //   for (let i = 0; i < 24; i++) {
  //     hours.push(`${i}:00`)
  //     // 生成日常在线数量（1000-1500之间的随机数）
  //     const online = Math.floor(Math.random() * 500) + 1000
  //     // 生成日常报警数量（100-300之间的随机数）
  //     const offline = Math.floor(Math.random() * 200) + 100
  //     onlineCount.push(online)
  //     offlineCount.push(offline)
  //     totalCount.push(online + offline)
  //   }

  return {
    hours,
    onlineCount,
    offlineCount,
    totalCount,
  };
};

// 初始化图表
const initChart = (online, alarm, title) => {
  if (!chartContainer.value) {
    debugInfo.value = "图表容器不存在";
    return;
  }

  try {
    // 销毁已存在的实例
    if (chartInstance) {
      chartInstance.dispose();
    }

    // 创建图表实例
    chartInstance = echarts.init(chartContainer.value);

    // 获取模拟数据
    const { hours, onlineCount, offlineCount, totalCount } = generateMockData();

    // 设置图表配置
    const option = {
      title: {
        text: "",
        left: "center",
        textStyle: {
          color: "#ffffff",
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["日常在线", "日常报警"],
        textStyle: {
          fontSize: 16,
        },
        top: 45,
        textStyle: {
          color: "#fff", // 图例文字颜色改为白色
        },
      },
      grid: {
        left: "1%",
        right: "1%",
        bottom: "3%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: title,
        axisLabel: {
          interval: 3, // 显示所有小时标签
          color: "#fff", // 文字颜色改为红色
          fontFamily: "SimSun, serif",
          fontSize: 18
        },textStyle: {
          fontSize: 30,
        },
      },
      yAxis: {
        type: "value",
        name: "",
        nameLocation: "middle",
        nameGap: 30,
        nameTextStyle: {
          color: "#fff", // 轴名称文字颜色改为红色
          fontFamily: "SimSun, serif",
          fontSize: 18
        },
        axisLabel: {
          color: "#fff", // 文字颜色改为红色
          fontFamily: "SimSun, serif",
          fontSize: 18
        },
      },
      series: [
        {
          name: "日常在线",
          type: "line",
        //   stack: "Total",
          areaStyle: {
            opacity: 0.3,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(0, 191, 255, 0.8)" },
              { offset: 1, color: "rgba(0, 191, 255, 0.1)" },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            width: 3,
            color: "#00bfff",
          },
          symbol: "circle",
          symbolSize: 8,
          data: online,
        },
        {
          name: "日常报警",
          type: "line",
        //   stack: "Total",
          areaStyle: {
            opacity: 0.3,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(255, 99, 71, 0.8)" },
              { offset: 1, color: "rgba(255, 99, 71, 0.1)" },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          lineStyle: {
            width: 3,
            color: "#ff6347",
          },
          symbol: "circle",
          symbolSize: 8,
           data:alarm
        //   data: [55,12,106,88,99,41,130,40,40,40,12,106,88,99,41,130,40,40,40,12,106,88,99,41,130,40,40,40,54,63,14]
// alarm
        },
        // {
        //   name: '总车辆数',
        //   type: 'line',
        //   emphasis: {
        //     focus: 'series'
        //   },
        //   lineStyle: {
        //     width: 3,
        //     color: '#4682b4',
        //     type: 'dashed'
        //   },
        //   symbol: 'diamond',
        //   symbolSize: 10,
        //   data: totalCount
        // }
      ],
    };

    // 设置配置项
    chartInstance.setOption(option);
    debugInfo.value = "图表初始化成功";

    // 添加窗口大小变化时的重绘
    const handleResize = () => {
      if (chartInstance) {
        chartInstance.resize();
      }
    };

    window.addEventListener("resize", handleResize);

    // 清理函数
    onUnmounted(() => {
      window.removeEventListener("resize", handleResize);
      if (chartInstance) {
        chartInstance.dispose();
      }
    });
  } catch (error) {
    debugInfo.value = `图表初始化失败: ${error.message}`;
    console.error("ECharts initialization error:", error);
  }
};

// 组件挂载后初始化图表
onMounted(() => {
  //   initChart()
});

// 监听容器变化，重新初始化图表
watch(chartContainer, (newVal) => {
  if (newVal) {
    // initChart()
  }
});

defineExpose({ initChart });
</script>

<style scoped>
.bj-line-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 95%;
  height: 95%;
  /* min-height: 500px; */
  /* padding: 20px; */
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-title {
  margin-top: 0;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.chart-container {
  width: 100%;
  height: 100%;
  margin-bottom: 15px;
}

.debug-info {
  padding: 10px;
  background: transparent;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bj-line-container {
    padding: 15px;
  }

  .chart-container {
    height: 300px;
  }

  .chart-title {
    font-size: 16px;
  }
}
</style>